<template>
    <div style="padding:30px;">
        <el-alert :closable="false" title="">
            <transition name="fade-transform" mode="out-in">
                <template>
                    <div>
                        <EditButton @add="onAdd" @refresh="onRefresh" @search="onSearch" :listData="getList"
                            :filterFieldName="getFields"></EditButton>
                        <el-table v-loading="listLoading" :data="list" style="width: 100%">
                            <!-- <el-table-column prop="roleId" label="ID">
                            </el-table-column> -->
                            <el-table-column prop="roleName" label="角色名">
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="150">
                                <template slot-scope="scope">
                                    <EditTableButton :attrs="attrs" @click-button="handleClick" :data="scope.row">
                                    </EditTableButton>
                                </template>
                            </el-table-column>
                        </el-table>
                        <edit-form @sendUpdate="update" ref="editForm"></edit-form>
                    </div>
                </template>
            </transition>
        </el-alert>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import EditForm from "@/views/common/edit-form.vue"
import { FormDataUtils, TouchType } from '@/views/common/data/ICommon';
import EditTableButton from "@/views/common/edit-table-button.vue"
import EditButton from "@/views/common/edit-button.vue"
import { ISysRoleModel } from '@/api/types';
import { RolesModule } from '@/store/modules/roles';

@Component({
    name: 'Room',
    components: {
        EditForm,
        EditTableButton,
        EditButton
    }
})
export default class extends Vue {
    public allList: Array<ISysRoleModel> = []
    public list: Array<ISysRoleModel> = []
    public listLoading: boolean = false
    scope: any;
    $refs: any;
    public optType: string = ""
    public attrs = ["roles.menu_allocation", "common.delete"]

    created() {
        this.init()
    }

    public getList() {
        return this.allList;
    }
    public getFields() {
        return "roleName"
    }

    //操作相关处理
    public handleClick(type: TouchType, row: any) {
        if (type === TouchType.DELETE) {
            RolesModule.deleteRole(row.roleId).then(v => {
                if (v) {
                    this.list = this.list.filter(value => {
                        return value.roleId != row.roleId
                    })
                }
            });
            return;
        }
        this.optType = type;
        if (type === TouchType.SEE || type === TouchType.EDIT) {
            let keys = Object.keys(row)
            let data = FormDataUtils.getForms(row, "roles", (key: string) => {
                return this.$t(key);
            }, type === TouchType.SEE ? keys : ['roleId'], [])
            this.$refs.editForm.showForm(data, type === TouchType.EDIT)
        } else if (type === TouchType.ADD) {
            let mod: ISysRoleModel = {
                roleId: 0,
                roleName: ""
            }
            let data = FormDataUtils.getForms(mod, "roles", (key: string) => {
                return this.$t(key);
            }, [], [])
            this.$refs.editForm.showForm(data, true)
        } else if (type == "menu_allocation") {
            alert("开发中")
        }
    }

    //更新成功
    public update(obj: any) {
        console.error(obj, this.optType);
        RolesModule.updateRole(obj).then(v => {
            console.error(v)
            if (v === 1) {//成功了
                for (let i = 0; i < this.list.length; i++) {
                    if (this.list[i].roleId === obj.roleId) {
                        this.list[i].roleName = obj.roleName
                        break;
                    }
                }
            } else if (!obj.roleId && v) {
                obj.roleId = v;
                this.list.push(obj);
            }
        }).catch(ex => {
            console.error(ex);
        })
    }

    public onAdd() {
        this.handleClick(TouchType.ADD, null);
    }

    public onRefresh() {
        console.error("onClick onRefresh");
    }

    public onSearch(val: any) {
        this.list = val
    }

    public async init() {
        this.list = [];
        this.listLoading = true
        let result: any = await RolesModule.getRoles();
        this.list = result
        this.allList = result
        setTimeout(() => {
            this.listLoading = false
        }, 0.5 * 1000)
    }
}
</script>